import {useState} from 'react'
import './zhuce.css'
import { Button, Input,Toast } from 'react-vant'
import {useNavigate} from'react-router-dom'
import {api} from '../../luyou/index.js'
export default function Zhuce() {
    const naviate = useNavigate()
    let [tel,settel]=useState('')
    let [password,setpassword]=useState('')
    let [flag,setflag]=useState(false)
    let [flag2,setflag2]=useState(false)
    let [flag3,setflag3]=useState(false)
    let [flag4,setflag4]=useState(false)
    let [flag5,setflag5]=useState(false)
    let [time,settime]=useState(60)
    let [yan,setyan]=useState('')
    let [yanzhengma,setyanzhengma]=useState('')
    //倒计时
    let send = () => {
        if(tel.length===11){
           let timer=setInterval(()=>{
              settime(time--);
              setflag3(true);
              if(time===50){
                 yanzheng()
              }
              if(time===0){
                 clearInterval(timer);
                 setflag3(false);
                 settime(60);
              }
           },1000)
        }
     };
     //手机号验证
     let telyan = () => {
       if(tel.length===0){
          setflag(true)
       }else{
          if(tel.length===11){
             setflag2(false)
          }else{
             setflag2(true)
          }
          setflag(false)
       }
     }
     //密码验证
     let mmyan = () => {
       if(password.length===0){
          setflag4(true)
       }else{
          if(password.length>=6&&password.length<=12){
             setflag5(false)
          }else{
             setflag5(true)
          }
          setflag4(false)
     }
    }
    //获取验证码
    let yanzheng=async()=>{
      let {data}=await api.post('/get_sms',{phone:tel})
      console.log(data)
      if(data.code===200){
        Toast.success('发送成功')
        setyan(data.sms)
      }else{
        Toast.fail('发送失败')
      }
    }
    //注册
    let zhuce=async()=>{
      let {data}=await api.post('/register',{phone:tel,password:password})
      if(data.code===200){
        Toast.success('注册成功')
        naviate('/login')
      }else if(data.code===400){
        Toast.fail('用户已存在')
      }else{
         Toast.fail('注册失败')
      } 
   }
   //点击按钮进行注册操作
   let zhuces=()=>{
    if(yan===yanzhengma){
      zhuce()
    }else{
      Toast.fail('验证码错误')
    }
   }
  return (
    <div>
        <div style={{width:'100%',height:'1rem',border:'0.01rem solid #ccc',margin:'auto',display:'flex',justifyContent:'center',alignItems:'center'}}>
            <h2>注册</h2>
        </div>
        <div style={{width:'100%',height:'1.5rem',marginTop:'0.5rem'}}>
               <div style={{width:'2rem',height:'2rem',margin:'auto',borderRadius:'50%'}}>
                    <img src="/public/02.jpeg" style={{width:'100%',height:'100%',borderRadius:'50%'}} alt="" />
                    <h1 style={{textAlign:"center"}}>速订魔方</h1>
               </div>
        </div>
        <div className='Z_box'>
            <div className='Z_box2'>
                <Input
                    value={tel}
                    type='tel'
                    onChange={tel => {settel(tel)}}
                    placeholder='请输入手机号'
                    // clearable
                    // clearTrigger="always"
                    onBlur={telyan}
                    
                />
            </div>
            <span className={flag?'xian':'xiao'}>请输入手机号</span>
            <span className={flag2?'xian':'xiao'}>请输入正确的手机号</span>
            <div className='Z_box2'>
                <Input
                value={password}
                type='password'
                onChange={password => {setpassword(password)}}
                placeholder='请输入密码'
                onBlur={mmyan}
                />
            </div>
            <span className={flag4?'xian':'xiao'}>请输入密码</span>
            <span className={flag5?'xian':'xiao'}>请输入正确的密码</span>
            <div className='Z_box2'>
            <Input
                prefix="💁"
                suffix={<Button onClick={send} size="small" type="primary">{flag3? `${time}秒后重新获取` : '获取验证码'}</Button>}
                placeholder="请输入短信验证码"
                value={yanzhengma}
                onChange={(val)=>setyanzhengma(val)}
            />
            </div>
            <p style={{textAlign:'center'}}><Button  style={{width:'3rem',height:'0.6rem',borderRadius:'0.5rem',backgroundColor:'#ff2630',color:'white'}} onClick={()=>{zhuces()}}>注册并登录</Button></p>
            <p style={{textAlign:'center',fontSize:'0.25rem'}} onClick={()=>{naviate('/')}}>已有账号，立即登录</p>
            <div>
                
            </div>
        </div>
    </div>
  )
}
